import React from 'react';
import ReactECharts from 'echarts-for-react';

interface SeriesItem {
  name: string;
  data: number[];
  color?: string;
}

interface CoolLineChartProps {
  xData: string[];
  seriesData: SeriesItem[];
}

const colorList = [
  '#ff4d4f', '#faad14', '#40a9ff', '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16', '#52c41a'
];

export default function CoolLineChart({ xData, seriesData }: CoolLineChartProps) {
  const option = {
    backgroundColor: '#0f2a43',
    title: {
      text: '趋势分析',
      left: 'center',
      top: 10,
      textStyle: {
        color: '#fff',
        fontSize: 22,
        fontWeight: 'bold',
        textShadowColor: '#00cfff',
        textShadowBlur: 10,
      },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.8)',
      borderColor: '#00cfff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
      axisPointer: {
        lineStyle: {
          color: '#00cfff',
          width: 2,
          type: 'dashed',
        },
      },
    },
    legend: {
      data: seriesData.map(s => s.name),
      bottom: 10,
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
      icon: 'circle',
    },
    grid: {
      left: 40,
      right: 20,
      top: 60,
      bottom: 50,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: '#00cfff',
          width: 2,
          shadowColor: '#00cfff',
          shadowBlur: 10,
        },
      },
      axisLabel: {
        color: '#fff',
        fontSize: 16,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#00cfff',
          width: 2,
        },
      },
      axisLabel: {
        color: '#fff',
        fontSize: 16,
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,207,255,0.2)',
          type: 'dashed',
        },
      },
    },
    series: seriesData.map((s, i) => ({
      name: s.name,
      type: 'line',
      data: s.data,
      symbol: 'circle',
      symbolSize: 12,
      lineStyle: {
        color: s.color || colorList[i % colorList.length],
        width: 4,
        shadowColor: s.color || colorList[i % colorList.length],
        shadowBlur: 10,
      },
      itemStyle: {
        color: s.color || colorList[i % colorList.length],
        borderColor: '#fff',
        borderWidth: 2,
        shadowColor: s.color || colorList[i % colorList.length],
        shadowBlur: 10,
      },
      emphasis: {
        focus: 'series',
      },
    })),
  };

  return (
    <div style={{ background: '#0f2a43', borderRadius: 16, boxShadow: '0 0 20px #00cfff', padding: 16 }}>
      <ReactECharts option={option} style={{ height: 400, width: '100%' }} />
    </div>
  );
} 